<template>
	<div id="index" ref="appRef">
		<div class="bg">
			<!-- loading -->
			<dv-loading v-if="loading">大屏加载中，请稍等...</dv-loading>
			<!-- 大屏内容 -->
			<div v-else class="host-body">
				<!-- 顶部标题 -->
				<a href="javascript:void(0);" @click="screen">
					<div class="top-title">
						<dv-decoration-3 class="zs1" :dur="10" :color="['#2971F7']" />
						<dv-decoration-2 class="zs2" :dur="10" :color="['#8FCBFB']" />
						<dv-decoration-2 class="zs3" :dur="10" :color="['#8FCBFB']" />
						<div class="time">
							{{ dateYear }} {{ dateWeek }} {{ dateDay }}
						</div>
					</div>
				</a>
				<div class="body-box">
					<div class="row-content-box-fiexd left">
						<div class="base-box left-box1">
							<Left1_1 v-if="pageIndex == 1" :options="ops_Left1_1" :t="timestring" />
							<Left1_2 v-else :options="ops_Left1_2" :t="timestring" />
						</div>
						<div class="base-box left-box2">
							<Left2_1 v-if="pageIndex == 1" :options="ops_Left2_1" :t="timestring" />
							<Left2_2 v-else :options="ops_Left2_2" :t="timestring" />
						</div>
						<div class="base-box left-box3">
							<Left3_1 v-if="pageIndex == 1" :options="ops_Left3_1" :t="timestring" />
							<Left3_2 v-else :options="ops_Left3_2" :t="timestring" />
						</div>
					</div>
					<div class="row-content-box-stretch center">
						<div class="base-box center-box1">
							<Center1 :data="data_center_1" :t="timestring" />
						</div>
						<div class="base-box center-box2">
							<Center2 :data="data_center_2" :t="timestring" />
						</div>
						<div class="base-box center-box3">
							<Center3 v-if="showCenter3" :data="data_center_3.data" :options="data_center_3.options" :t="timestring" />
						</div>
					</div>
					<div class="row-content-box-fiexd right">
						<div v-if="pageIndex == 1" class="base-box right-box1">
							<Right1_1 :data="data_right1_1" :t="timestring" />
						</div>
						<div v-else class="base-box">
							<Right1_2 :options="ops_Right1_2" :t="timestring" />
						</div>

						<div v-if="pageIndex == 1" class="base-box right-box2">
							<Right2_1 :options="ops_Right2_1"  :t="timestring" />
						</div>
						<div v-else class="base-box">
							<Right2_2 :options="ops_Right2_2" :t="timestring" />
						</div>
						<div v-if="pageIndex == 1" class="base-box right-box3">
							<Right3_1 :data="data_right3_1.data" :options="data_right3_1.options" :t="timestring" />
						</div>
						<div v-else class="base-box">
							<Right3_2 :options="ops_Right3_2" :t="timestring" />
						</div>
					</div>
				</div>
				<div class="foot"></div>
			</div>
		</div>
	</div>
</template>

<script>
import { RepairApi } from "@/api/RepairApi";

import { debounce } from '@/utils';
const resizeChartMethod = '$__resizeChartMethod';

import resizeMixin from '../utils/resizeMixin'
import drawMixin from "../utils/drawMixin.js";
import { formatTime } from '../utils/index.js'
import { OPTION_BAR, OPTIONS_LINE, RIGHT_2_1_OPS, OPTIONS_TOW_BAR, OPTIONS_CXDW_BAR, OPTIONS_GRWXL_BAR, OPTION_MJT } from './repairsub/options'
import { MOCKDATA } from '../api/mock'

import Center1 from './repairsub/Center1'
import Center2 from './repairsub/Center2'
import Center3 from './repairsub/Center3'

import Left1_1 from './repairsub/Left1_1'
import Left2_1 from './repairsub/Left2_1'
import Left3_1 from './repairsub/Left3_1'
import Right1_1 from './repairsub/Right1_1'
import Right2_1 from './repairsub/Right2_1'
import Right3_1 from './repairsub/Right3_1'

import Left1_2 from './repairsub/Left1_2'
import Left2_2 from './repairsub/Left2_2'
import Left3_2 from './repairsub/Left3_2'
import Right1_2 from './repairsub/Right1_2'
import Right2_2 from './repairsub/Right2_2'
import Right3_2 from './repairsub/Right3_2'
const NAME_MAX_LENGTH = 6;
const TOP_COUT = 6;
export default {
	mixins: [drawMixin, resizeMixin],
	data() {
		return {
			pageIndex: 1,
			barLinearGradientColor: null,
			borderLinearGradientColor: null,
			barLinearGradientColor2: null,
			borderLinearGradientColor2: null,
			barLinearGradientColor3: null,

			isMockData: false,
			timestring: '',

			fullscreen: false,
			data_center_1: {},
			data_center_2: [],
			data_center_3: {},

			ops_Left1_1: {},
			ops_Left2_1: {},
			ops_Left3_1: {},
			data_right1_1: {},
			ops_Right2_1: {},
			data_right3_1: {},

			ops_Left1_2: {},
			ops_Left2_2: {},
			ops_Left3_2: {},
			ops_Right1_2: {},
			ops_Right2_2: {},
			ops_Right3_2: {},

			loading: true,
			timing: null,
			dateDay: null,
			dateYear: null,
			dateWeek: null,
			weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],

			page_1_data: {},
			page_2_data: {},
			showCenter3:true,
		}
	},
	components: {
		Center1,
		Center2,
		Center3,

		Left1_1,
		Left2_1,
		Left3_1,
		Right1_1,
		Right2_1,
		Right3_1,

		Left1_2,
		Left2_2,
		Left3_2,
		Right1_2,
		Right2_2,
		Right3_2,
	},
	mounted() {
		this.timeFn();//定时刷新右上角的时间 
		this.initColor(); //初始化颜色
		this.loading = false;
		if (this.isMockData) {
			this.initData(); //初始化数据
		} else {
			this.initServerData();
		}
		this.initAutoTime(); 
	},
	created() {
		window.addEventListener('resize', this[resizeChartMethod], false);
	},
	beforeDestroy() {
		clearInterval(this.timing)
	},
	methods: {
		initAutoTime(){
			let that = this;
			//20秒切换一次大屏
			setInterval(function(){
				if(that.pageIndex==1){
					that.pageIndex=2;
				}else{
					that.pageIndex =1;
				} 
			},1000 * 20)
			//5分钟更新一次数据
			setInterval(async function(){
				that.page_1_data = await RepairApi.pageData1();
				that.page_2_data = await RepairApi.pageData2();
				that.initData();
			},1000 * 60 * 5) 
		},
		initColor() {
			this.barLinearGradientColor = new this.$echarts.graphic.LinearGradient(
				0, 0, 0, 1,
				[
					{
						offset: 0,
						color: "rgba(0,201,255,0.9)",
					},
					{
						offset: 1,
						color: "rgba(0,152,255,0)",
					},
				],
				false
			);
			this.borderLinearGradientColor = new this.$echarts.graphic.LinearGradient(
				0, 0, 0, 1,
				[
					{
						offset: 0.5,
						color: "rgba(0, 249, 255, 1)",
					},
					{
						offset: 1,
						color: "rgba(0, 150, 153, 0.5)",
					},
				],
				false
			);
			this.barLinearGradientColor2 = new this.$echarts.graphic.LinearGradient(
				0, 0, 0, 1,
				[
					{
						offset: 0,
						color: "rgba(3, 66, 255, 1)",
					},
					{
						offset: 1,
						color: "rgba(11, 110, 255, 0.3)",
					},
				],
				false
			);
			this.borderLinearGradientColor2 = new this.$echarts.graphic.LinearGradient(
				0, 0, 0, 1,
				[
					{
						offset: 0.5,
						color: "rgba(0, 180, 255, 1)",
					},
					{
						offset: 1,
						color: "rgba(0, 180, 255, 0.3)",
					},
				],
				false
			);
			this.barLinearGradientColor3 = new this.$echarts.graphic.LinearGradient(
				0, 0, 1, 1,
				[
					{
						offset: 0,
						color: "#00DFFF",
					},
					{
						offset: 1,
						color: "#007AFF",
					},
				],
				false
			);
		},
		//从服务器获取数据
		async initServerData() {
			this.page_1_data = await RepairApi.pageData1();
			this.page_2_data = await RepairApi.pageData2();
			this.initData();
		},
		initData() {
			this.initCenter1();
			this.initCenter2(); 
			this.initCenter3();
			 
			this.initLeft1_1();
			this.initLeft2_1();
			this.initLeft3_1();
			this.initRight1_1();
			this.initRight2_1();
			this.initRight3_1();
			
			this.initLeft1_2();
			this.initLeft2_2();
			this.initLeft3_2();
			this.initRight1_2();
			this.initRight2_2();
			this.initRight3_2();
		},
		initLeft1_1() {
			let opts;
			if (this.isMockData) {
				opts = OPTION_BAR.getOpts(MOCKDATA.LEFT_1_1.title, MOCKDATA.LEFT_1_1.data);
			} else {
				let title = [];
				let data = [];
				this.page_1_data.data01.forEach(item => {
					title.push(item.rep_u_name);
					data.push(item.size_num);
				});
				opts = OPTION_BAR.getOpts(title, data);
			}
			opts.series[0].itemStyle.normal.borderColor = this.borderLinearGradientColor;
			opts.series[0].itemStyle.normal.color = this.barLinearGradientColor;
			this.ops_Left1_1 = opts;
		},
		initLeft2_1() {
			let opts;
			if (this.isMockData) {
				opts = OPTION_BAR.getOpts(MOCKDATA.LEFT_2_1.title, MOCKDATA.LEFT_2_1.data);
			} else {
				let title = [];
				let data = [];
				this.page_1_data.data02.forEach(item => {
					title.push(item.rep_a_name);
					data.push(item.size_num);
				});
				opts = OPTION_BAR.getOpts(title, data);
				opts = OPTION_BAR.getOpts(title, data);
			}
			opts.series[0].itemStyle.normal.borderColor = this.borderLinearGradientColor;
			opts.series[0].itemStyle.normal.color = this.barLinearGradientColor;
			this.ops_Left2_1 = opts;
		},
		initLeft3_1() {
			let opts =[];
			if (this.isMockData) {
				opts = OPTION_BAR.getOpts(MOCKDATA.LEFT_3_1.title, MOCKDATA.LEFT_3_1.data);
			} else {
				let title = [];
				let data = [];
				this.page_1_data.data03.forEach(item => {
					title.push(item.rep_i_name);
					data.push(item.size_num);
				});
				opts = OPTION_BAR.getOpts(title, data);
			}
			opts.grid.bottom = '30%';
			opts.xAxis.axisLabel.rotate = 60;
			opts.series[0].itemStyle.normal.borderColor = this.borderLinearGradientColor;
			opts.series[0].itemStyle.normal.color = this.barLinearGradientColor;
			this.ops_Left3_1 = opts;
		},
		initCenter1() {
			if (this.isMockData) {
				this.data_center_1 = MOCKDATA.CENTER_1;
			} else {
				let data = {}
				if (this.page_1_data.data04.length > 0) {
					data.t1 = this.page_1_data.data04[0].size_num;
				}
				if (this.page_1_data.data05.length > 0) {
					data.t2 = this.page_1_data.data05[0].size_num;
				}
				if (this.page_1_data.data06.length > 0) {
					data.t3 = this.page_1_data.data06[0].size_num;
				}
				if (this.page_1_data.data07.length > 0) {
					data.t4 = this.page_1_data.data07[0].size_num;
				}
				if (this.page_1_data.data08.length > 0) {
					data.today = this.page_1_data.data08[0].size_num;
				}
				if (this.page_1_data.data09.length > 0) {
					data.today_over = this.page_1_data.data09[0].size_num;
				}
				if (this.page_1_data.data10.length > 0) {
					data.week = this.page_1_data.data10[0].size_num;
				}
				if (this.page_1_data.data11.length > 0) {
					data.week_over = this.page_1_data.data11[0].size_num;
				}
				if (this.page_1_data.data12.length > 0) {
					data.month = this.page_1_data.data12[0].size_num;
				}
				if (this.page_1_data.data13.length > 0) {
					data.month_over = this.page_1_data.data13[0].size_num;
				}
				if (this.page_1_data.data14.length > 0) {
					data.year = this.page_1_data.data14[0].size_num;
				}
				if (this.page_1_data.data15.length > 0) {
					data.year_over = this.page_1_data.data15[0].size_num;
				}
				this.data_center_1 = data;
			}
		},
		initCenter2() {
			if (this.isMockData) {
				this.data_center_2 = MOCKDATA.CENTER_2;
			} else {
				let data = [];
				this.page_1_data.data16.forEach(item => {
					let temp = [];
					temp.push(item.rep_a_name.substring(0,NAME_MAX_LENGTH));
					temp.push(item.rep_wo_insert_time.substring(5));
					temp.push(item.rep_i_name);
					temp.push(item.rep_wo_instate);
					temp.push(item.rep_u_name.substring(0,NAME_MAX_LENGTH+2));
					data.push(temp);
				});
				this.data_center_2 = data;
			}
		},
		initCenter3() {
			let opts;
			let data; 
			let legendName = ["好评", "一般", "差评"];
			let XName = [];
			var datas = [];
			
			if(this.isMockData){
				XName = ['教室物业部', '南院维修部', '明德物业', '新正大物业', '国基伟业'];
				datas = [
					[55, 66, 47, 82, 78],
					[12, 25, 30, 54, 65],
					[5, 8, 4, 3, 4],
				];
				data = MOCKDATA.CENTER_3.data;
			}else{
				let items = [];
				//将数据合并到一起
				this.page_1_data.data17.forEach(item => {
					let isHave = false;
					for(let i=0;i<items.length;i++){
						if(items[i].name == item.rep_u_name){
							if(item.rep_wo_pf==5){
								items[i].hp +=item.size_num;
							}else if(item.rep_wo_pf==4 || item.rep_wo_pf==3){
								items[i].yb +=item.size_num;
							}else{
								items[i].cp +=item.size_num;
							}
							isHave = true;
							break;
						}
					}
					if(!isHave){
						let temp ={
							name: item.rep_u_name
						}
						if(item.rep_wo_pf==5){
							temp.hp = item.size_num;
							temp.yb =0;
							temp.cp =0;
						}else if(item.rep_wo_pf==4 || item.rep_wo_pf==3){
							temp.yb = item.size_num;
							temp.hp =0;
							temp.cp =0;
						}else{
							temp.cp = item.size_num;
							temp.hp =0;
							temp.yb =0;
						}
						items.push(temp);
					}
				});
				
				let hp=[];
				let yb=[];
				let cp =[];
				let hpCount =0; //好评数量
				let ybCount =0;//一般数量
				let cpCount =0;//差评数量
				items.forEach(item => {
					XName.push(item.name);
					hp.push(item.hp);
					cp.push(item.cp);
					yb.push(item.yb);
					hpCount += item.hp;
					ybCount += item.yb;
					cpCount += item.cp;
				});
				datas.push(hp);
				datas.push(yb);
				datas.push(cp);
				data = {};
				let sum = hpCount + cpCount+ ybCount;
				if(hpCount>0){
					data.hp =(hpCount * 100 / sum).toFixed(2);
				}else{
					data.hp =0;
				}
				if(cpCount>0){
					data.cp =(cpCount * 100 / sum).toFixed(2);
				}else{
					data.cp =0;
				}
				if(ybCount>0){
					data.yb =(ybCount * 100 / sum).toFixed(2);
				}else{
					data.yb =0;
				}
			}
			opts = OPTIONS_LINE.getOpts(legendName, XName, datas);
			this.data_center_3.options = opts;
			this.data_center_3.data  = data;
		},
		initRight1_1() {
			if (this.isMockData) {
				this.data_right1_1 = MOCKDATA.Right_1_1;
			} else {
				let data = {};
				if (this.page_1_data.data18.length > 0) {
					data.d1 = this.page_1_data.data18[0].size_num;
				} else {
					data.d1 = 0;
				}
				if (this.page_1_data.data19.length > 0) {
					data.d2 = this.page_1_data.data19[0].size_num;
				} else {
					data.d2 = 0;
				}
				if (this.page_1_data.data20.length > 0) {
					data.d3 = this.page_1_data.data20[0].size_num;
				} else {
					data.d3 = 0;
				}
				if (this.page_1_data.data21.length > 0) {
					data.d4 = this.page_1_data.data21[0].size_num;
				} else {
					data.d4 = 0;
				}
				let sum = data.d1 + data.d2 + data.d3 + data.d4;
				if (data.d1 == 0) {
					data.d1p = 0;
				} else {
					data.d1p = (data.d1 * 100 / sum).toFixed(0);
				}
				if (data.d2 == 0) {
					data.d2p = 0;
				} else {
					data.d2p = (data.d2 * 100 / sum).toFixed(0);
				}
				if (data.d3 == 0) {
					data.d3p = 0;
				} else {
					data.d3p = (data.d3 * 100 / sum).toFixed(0);
				}
				if (data.d4 == 0) {
					data.d4p = 0;
				} else {
					data.d4p = (data.d4 * 100 / sum).toFixed(0);
				}
				this.data_right1_1 = data;
			}
		},
		initRight2_1() {
			let ops = RIGHT_2_1_OPS;
			if (this.isMockData) {
				ops.series[0].data = MOCKDATA.Right_2_1;
			} else {
				let d1 = 0;
				if (this.page_1_data.data22.length > 0) {
					d1 = this.page_1_data.data22[0].size_num;
				}
				let d2 = 0;
				if (this.page_1_data.data23.length > 0) {
					d2 = this.page_1_data.data23[0].size_num;
				}
				let d3 = 0;
				if (this.page_1_data.data24.length > 0) {
					d2 = this.page_1_data.data24[0].size_num;
				}
				let d4 = 0;
				if (this.page_1_data.data25.length > 0) {
					d4 = this.page_1_data.data25[0].size_num;
				}
				let data = [{
					value: d1,
					name: "2小时内",
				},
				{
					value: d2,
					name: "8小时内",
				},
				{
					value: d3,
					name: "24小时内",
				},
				{
					value: d4,
					name: "24小时以上",
				}];
				ops.series[0].data = data;
			}
			this.ops_Right2_1 = ops;
		},
		initRight3_1() {

			let data;
			let xName=[];
			let data1=[];
			let data2=[];
			if (this.isMockData) {
				data = MOCKDATA.Right_3_1.data;
				xName = MOCKDATA.Right_3_1.barData.xName;
				data1 = MOCKDATA.Right_3_1.barData.data1;
				data2 = MOCKDATA.Right_3_1.barData.data2;
			} else {
				let sumSl = 0; //受理总分钟数
				let sumWG = 0; //完工总分钟数
				this.page_1_data.data26.forEach(item => {
					sumSl += item.size_num;
				});
				this.page_1_data.data27.forEach(item => {
					sumWG += item.size_num;
				});

				let avgSl = 0; //受理平均分钟数
				if (this.page_1_data.data26.length > 0) {
					avgSl = sumSl / this.page_1_data.data26.length;
					avgSl = avgSl / 60;
				}
				let avgWG = 0; //完工平均分钟数
				if (this.page_1_data.data27.length > 0) {
					avgWG = sumWG / this.page_1_data.data27.length;
					avgWG = avgWG / 60;
				}
				data = {
					d1: avgSl.toFixed(1) + 'h',
					d2: avgWG.toFixed(1) + 'h',
				};

				let objs = [];
				//拿到受理的数据
				this.page_1_data.data26.forEach(item => {
					objs.push({
						name: item.rep_u_name,
						sl: item.size_num,
						wg: 0
					});
				});
				//合并完工的数据
				this.page_1_data.data27.forEach(item => {
					let isHave = false;
					for (let i = 0; i < objs.length; i++) {
						if (objs[i].name == item.rep_u_name) {
							objs[i].wg = item.size_num;
							isHave = true;
							break;
						}
					}
					if (!isHave) {
						objs.push({
							name: item.rep_u_name,
							sl: 0,
							wg: item.size_num
						});
					}
				});

				objs.forEach(item => {
					xName.push(item.name.substring(0,NAME_MAX_LENGTH));
					data1.push((item.sl/60).toFixed(0));
					data2.push((item.wg/60).toFixed(0));
				});
			}
			this.data_right3_1.data = data;
			let opts = OPTIONS_TOW_BAR.getOpts(xName, data1, data2);
			opts.series[0].itemStyle.normal.borderColor = this.borderLinearGradientColor2;
			opts.series[0].itemStyle.normal.color = this.barLinearGradientColor2;
			opts.series[1].itemStyle.normal.borderColor = this.borderLinearGradientColor;
			opts.series[1].itemStyle.normal.color = this.barLinearGradientColor;
			this.data_right3_1.options = opts;
		},
		initLeft1_2() {
			let result = [];
			if(this.isMockData){
				result =[
					{ name: '制造业', value: 5713, itemStyle: { color: '#FF6900' } },
					{ name: '信息传输、软件和信息技术服务业', value: 3022, itemStyle: { color: '#00FF9E' } },
					{ name: '科学研究和技术服务业', value: 2647, itemStyle: { color: '#00F9FF' } },
					{ name: '金融业', value: 2291 },
					{ name: '批发和零售业', value: 1946 },
					{ name: '交通运输、仓储和邮政业', value: 1812 },
				];
			}else{
				let items = this.page_2_data.data01;
				for(let i=0,len=items.length;i<len && i<TOP_COUT;i++){
					let temp = {
						name:items[i].rep_u_name,
						value:items[i].size_num,
					}
					if(i==0){
						temp.itemStyle = { color: '#FF6900' };
					}else if(i==1){
						temp.itemStyle = { color: '#00FF9E' };
					}else if(i==2){
						temp.itemStyle = { color: '#00F9FF' };
					}
					result.push(temp);
				}
			} 
			let opts = OPTIONS_CXDW_BAR.getOpts(result);
			this.ops_Left1_2 = opts;
		},
		initLeft2_2() {
			//填充颜色
			let TCcolor = new this.$echarts.graphic.LinearGradient(
				0, 0, 0, 1,
				[
					{
						offset: 0,
						color: "#03D4DAFF",
					},
					{
						offset: 0.9,
						color: "#0798B688",
					},
				],
				false
			);
			let xName =[];
			let XData =[];
			if(this.isMockData){
				xName = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
				XData = [297, 68, 124, 319, 196, 252, 197, 240, 375, 384, 118, 266]
			}else{
				this.page_2_data.data02.forEach(item => {
					xName.push(item.rep_wo_insert_time);
					XData.push(item.size_num);
				});
			}
			let opts = OPTION_MJT.getOpts(TCcolor, '#03D4DA', xName, XData, '');
			this.ops_Left2_2 = opts;
		},
		initLeft3_2() {
			//填充颜色
			let TCcolor = new this.$echarts.graphic.LinearGradient(
				0, 0, 0, 1,
				[
					{
						offset: 0,
						color: "#1148F6FF",
					},
					{
						offset: 0.9,
						color: "#1148F688",
					},
				],
				false
			);
			let xName =[];
			let XData =[];
			if(this.isMockData){
				xName = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
				XData =[73, 87, 88, 54, 82, 64, 60, 71, 83, 72, 80, 63]
			}else{
				let items =[];
				//合并数据
				this.page_2_data.data03.forEach(item => {
					let isHave = false;
					for(let i=0,len=items.length;i<len;i++){
						if(items[i].time == item.rep_wo_insert_time){
							if(item.rep_wo_pf==5){
								items[i].hp +=item.size_num;
							}else{
								items[i].cp +=item.size_num;
							}
							isHave = true;
							break;
						}
					}
					if(!isHave){
						let temp = {
							time:item.rep_wo_insert_time
						};
						if(item.rep_wo_pf==5){
							temp.hp =item.size_num;
							temp.cp=0;
						}else{
							temp.cp =item.size_num;
							temp.hp = 0;
						}
						items.push(temp);
					} 
				}); 
				
				items.forEach(item => {
					xName.push(item.time);
					if(item.hp==0){
						XData.push(0);
					}else{
						XData.push((item.hp * 100 /(item.hp +item.cp)).toFixed(2))
					}
				});

			} 
			let opts = OPTION_MJT.getOpts(TCcolor, '#1148F6', xName, XData, '%');
			this.ops_Left3_2 = opts;
		},
		initRight1_2() {
			
			let result = [];
			if(this.isMockData){
				result =[
					{ name: '制造业', value: 5713, itemStyle: { color: '#FF6900' } },
					{ name: '信息传输、软件和信息技术服务业', value: 3022, itemStyle: { color: '#00FF9E' } },
					{ name: '科学研究和技术服务业', value: 2647, itemStyle: { color: '#00F9FF' } },
					{ name: '金融业', value: 2291 },
					{ name: '批发和零售业', value: 1946 },
					{ name: '交通运输、仓储和邮政业', value: 1812 },
				];
			}else{
				let items = this.page_2_data.data04;
				for(let i=0,len=items.length;i<len && i<TOP_COUT;i++){
					let temp = {
						name:items[i].rep_wom_repairbodyname,
						value:items[i].size_num,
					}
					if(i==0){
						temp.itemStyle = { color: '#FF6900' };
					}else if(i==1){
						temp.itemStyle = { color: '#00FF9E' };
					}else if(i==2){
						temp.itemStyle = { color: '#00F9FF' };
					}
					result.push(temp);
				}
			} 
 
			let opts = OPTIONS_GRWXL_BAR.getOpts(result);
			// opts.series[0].itemStyle.normal.color = this.barLinearGradientColor3;
			this.ops_Right1_2 = opts;
		},
		initRight2_2() {
			//填充颜色
			let TCcolor = new this.$echarts.graphic.LinearGradient(
				0, 0, 0, 1,
				[
					{
						offset: 0,
						color: "#03D4DAFF",
					},
					{
						offset: 0.9,
						color: "#0798B688",
					},
				],
				false
			);
			let xName =[];
			let XData =[];
			if(this.isMockData){
				xName = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
				XData = [277, 212, 257, 235, 216, 255, 213, 282, 290, 243, 205, 258]
			}else{
				this.page_2_data.data05.forEach(item => {
					xName.push(item.rep_wo_insert_time);
					XData.push((item.size_num/60).toFixed(1));
				});
			}
			let opts = OPTION_MJT.getOpts(TCcolor, '#05C2CF', xName, XData, '');
			this.ops_Right2_2 = opts;
		},
		initRight3_2() {
			//填充颜色
			let TCcolor = new this.$echarts.graphic.LinearGradient(
				0, 0, 0, 1,
				[
					{
						offset: 0,
						color: "#1148F6FF",
					},
					{
						offset: 0.9,
						color: "#1148F688",
					},
				],
				false
			);
			let xName =[];
			let XData =[];
			if(this.isMockData){
				xName = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
				XData =[73, 87, 88, 54, 82, 64, 60, 71, 83, 72, 80, 63]
			}else{
				this.page_2_data.data06.forEach(item => {
					xName.push(item.rep_wo_insert_time);
					XData.push((item.size_num/60).toFixed(1));
				});
			}
			let opts = OPTION_MJT.getOpts(TCcolor, '#1148F6', xName, XData, '');
			this.ops_Right3_2 = opts;
		},
		//定时更新时间
		timeFn() {
			this.timing = setInterval(() => {
				this.dateDay = formatTime(new Date(), 'HH:mm:ss')
				this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
				this.dateWeek = this.weekday[new Date().getDay()]
			}, 1000)
		},
		 
		screen() {
			let element = document.documentElement;
			if (this.fullscreen) {
				if (document.exitFullscreen) {
					document.exitFullscreen();
				} else if (document.webkitCancelFullScreen) {
					document.webkitCancelFullScreen();
				} else if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen();
				} else if (document.msExitFullscreen) {
					document.msExitFullscreen();
				}
			} else {
				if (element.requestFullscreen) {
					element.requestFullscreen();
				} else if (element.webkitRequestFullScreen) {
					element.webkitRequestFullScreen();
				} else if (element.mozRequestFullScreen) {
					element.mozRequestFullScreen();
				} else if (element.msRequestFullscreen) {
					// IE11
					element.msRequestFullscreen();
				}
			}
			this.fullscreen = !this.fullscreen;
		},
		// 防抖函数来控制 resize 的频率
		[resizeChartMethod]: debounce(function () {
			this.timestring = formatTime(new Date(), 'yyyyMMddHHmmss')
		}, 200),
	}
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/index.scss';
</style>
